import React, { Component } from 'react'
// 高阶组件HOC其实就是一个函数，他把组件作为参数，并且返回一个新的组件
// 一般情况下，高阶适用于类组件
const withTest = (Com) => {
  return class extends Component {
    state = {
      username: ''
    }
    componentDidMount () {
      this.setState({
        username: localStorage.getItem('username')
      })
    }
    render () {
      return (
        <Com username = { this.state.username }/>
      )
    }
  }
}

class Header extends Component {
  render () {
    const { username } = this.props
    return (
      <h1>header - { username }</h1>
    )
  }
}
Header = withTest(Header)
class Content extends Component {
  
  render () {
    const { username } = this.props
    return (
      <div>content - { username }</div>
    )
  }
}
Content = withTest(Content)
export default class App extends Component {
  render() {
    return (
      <div>
        <Header />
        <Content />
      </div>
    )
  }
}
